<template>
  <div class="common_layout">
    <el-container>
      <el-header>
        <div>后台管理</div>
        <Dropdown />
      </el-header>
      <el-container>
        <el-aside width="200px">
          <MenuComp :menuList="menuList" />
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ArrowDown } from "@element-plus/icons-vue";
import Dropdown from "@/components/Dropdown.vue";
import { getMenuApi } from "@/api/home";
import { onMounted, ref } from "vue";
import { makeTree } from "@/utils/makeTree";
import { menuInt } from "@/api/home/type";
import MenuComp from "@/components/MenuComp.vue";
import { ElMessage } from "element-plus";
// 获取仓库
import loginStore from "@/store/modules/login";
// 仓库实例化
const loginSt = loginStore();

// 菜单
let menuList = ref<menuInt[]>([]);

/**
 * 获取菜单
 */
const getMenu = () => {
  const username = loginSt.$state.userInfo.username;
  getMenuApi(username as string).then((res) => {
    if (res.code == 0) {
      let newMenu = makeTree(res.data && res.data);
      menuList.value = newMenu;
    } else if (res.code == -1 && res.msg.includes("登录")) {
      ElMessage.info(res.msg);
    }
  });
};
onMounted(() => {
  getMenu();
});
</script>

<style scoped lang="scss">
.common_layout {
  height: 100%;
  & > .el-container {
    height: 100%;
  }
  .el-header {
    background-color: #c6e2ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-aside {
    .el-menu {
      height: 100%;
      background-color: #d9ecff;

      ::v-deep .el-menu-item.is-active {
        background-color: #0087d2;
        color: #fff;
      }
    }
  }
  .el-main {
    background-color: #ecf5ff;
  }
}
</style>
